<template>
  <div class="catcherPage">
    <div class="part1">游戏次数：{{ playNum }}次</div>
    <div class="part2">
      <div class="part20">
        <div class="part201" :style="`left: ${gameData.left}px;top: ${gameData.top}px`">
          <div class="part2011"></div>
          <div class="part2012" :class="gameData.lrUp && 'part2012L'"></div>
          <div class="part2013" :class="gameData.lrUp && 'part2013R'"></div>
          <img v-if="gameData.hookGoods" src="./img/small_gift.png" class="image" />
        </div>
        <div class="part202">
          <div class="part2021">
            <div class="part20211" :style="`transform: translateX(-${gameData.num1}px);`">
              <img
                v-for="item in 4"
                :key="item"
                :data-gift="item + 'L'"
                :style="`opacity: ${gameData.hideNode === item + 'L' ? '0' : '1'}`"
                src="./img/small_gift.png"
                class="image1Anima"
              />
            </div>
          </div>

          <div class="part2021 part2022">
            <div class="part20211" :style="`transform: translateX(-${gameData.num2}px);`">
              <img
                v-for="item in 4"
                :key="item"
                :data-gift="item + 'R'"
                :style="`opacity: ${gameData.hideNode === item + 'R' ? '0' : '1'}`"
                src="./img/small_gift.png"
                class="image1Anima"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="part21">
        <img class="image" src="./img/win_head.png" />
      </div>
    </div>

    <div class="part3">
      <div class="part31">
        <img src="./img/start_btn_bgg.png" class="image" />
      </div>
      <div class="part32" v-if="clickAnima">
        <img src="./img/start_btn_bgg1.png" class="image" />
      </div>
      <div class="part33" v-if="!clickAnima">
        <img src="./img/start_btn_bg2.png" class="image" />
      </div>
      <div class="part34" :class="!clickAnima && 'part341'" @click="catchBtnFoo">确认</div>
    </div>
  </div>
</template>

<script>
const uni = {
  upx2px: (num) => {
    return num / 2
  },
}

export default {
  props: {
    playNum: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      gameData: {
        hideNode: '',
        num1: 0,
        num2: 0,
        left: uni.upx2px(270),
        top: 0,
        lrUp: false,
        hookGoods: false,
        timer: null,
        timer1: null,
      },
      clickAnima: true,
    }
  },
  mounted() {
    this.start()
  },
  methods: {
    catchBtnFoo() {
      this.$emit('goLuckBtn')
    },
    goLuckBtn() {
      this.clickAnima = false
      setTimeout(() => {
        this.clickAnima = true
      }, 300)

      this.userHookAnima()
    },
    start() {
      clearInterval(this.gameData.timer)
      this.gameData.timer = setInterval(() => {
        this.animaFoo()
      }, 1000 / 120)
    },
    randomNum(max, min) {
      // 随机数
      return Math.floor(Math.random() * (max - min) + min)
    },
    delayTime(time) {
      // 异步延时
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, time)
      })
    },
    animaFoo() {
      // 礼物盒子动画
      this.gameData.num1 = this.gameData.num1 + 1
      if (this.gameData.num1 > uni.upx2px(246)) {
        this.gameData.num1 = 0
      }

      this.gameData.num2 = this.gameData.num2 - 1
      if (this.gameData.num2 < 0) {
        this.gameData.num2 = uni.upx2px(246)
      }
    },
    userHookAnima() {
      // 获取礼物盒子位置
      clearInterval(this.gameData.timer) // 执行动画函数

      let tempArr = []
      const bigWrap = document.querySelector('.part20').getBoundingClientRect()
      const data = document.querySelectorAll('.image1Anima')
      data.forEach((item) => {
        let xxyy = item.getBoundingClientRect()
        let left1 = xxyy.left - bigWrap.left
        let top1 = xxyy.top - bigWrap.top

        if (uni.upx2px(-40) < left1 && left1 < uni.upx2px(340)) {
          tempArr.push({
            left: left1 + uni.upx2px(104),
            top: top1 - uni.upx2px(114),
            dataset: {
              gift: item.getAttribute('data-gift'),
            },
            item: item,
          })
        }
      })

      let tempObj = tempArr[this.randomNum(tempArr.length, 0)]
      this.userHookMove(tempObj)
    },
    async userHookMove(tempObj) {
      // 抓娃娃钩子动画
      this.gameData.lrUp = true

      await this.delayTime(200)
      this.gameData.left = tempObj.left

      await this.delayTime(300)
      this.gameData.top = tempObj.top

      await this.delayTime(200)
      this.gameData.hideNode = tempObj.dataset.gift
      this.gameData.hookGoods = true

      await this.delayTime(500)
      this.gameData.top = 0

      await this.delayTime(300)
      this.gameData.hookGoods = false
      this.gameData.lrUp = false

      await this.delayTime(200)
      this.gameData.hideNode = ''
      this.start()
      this.$emit('getLuckRes')
    },
  },
}
</script>

<style lang="scss" scoped>
.catcherPage {
  width: 666rpx;
  height: 684rpx;
  background: url('./img/win_main.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 84rpx;
  line-height: 1;
  color: #44000a;
  .image {
    width: 100%;
    height: 100%;
  }
  .part1 {
    font-size: 30rpx;
    padding-top: 55rpx;
    padding-bottom: 16rpx;
    text-align: center;
  }
  .part2 {
    position: relative;
    width: 100%;
    height: 536rpx;
    .part20 {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 540rpx;
      height: 500rpx;
      overflow: hidden;
      .part201 {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        transition: all 0.3s;
        z-index: 11;
        .image {
          width: 66rpx;
          height: 72rpx;
          position: absolute;
          top: 116rpx;
          left: -14rpx;
        }
        .part2011 {
          position: absolute;
          top: -318rpx;
          left: -8rpx;
          width: 51rpx;
          height: 429rpx;
          background: url('./img/hook_head.png') no-repeat;
          background-size: 100% 100%;
          z-index: 10;
        }
        .part2012,
        .part2013 {
          position: absolute;
          top: 99rpx;
          width: 35rpx;
          height: 50rpx;
          z-index: 9;
          transition: all 0.3s;
        }
        .part2012 {
          left: -22rpx;
          background: url('./img/hook_left.png') no-repeat;
          background-size: 100% 100%;
        }
        .part2013 {
          right: -58rpx;
          background: url('./img/hook_right.png') no-repeat;
          background-size: 100% 100%;
        }
        .part2012L {
          transform: rotate(15deg);
          transform-origin: top right;
        }
        .part2013R {
          transform: rotate(-15deg);
          transform-origin: top left;
        }
      }

      .part202 {
        padding-top: 198rpx;
        width: 540rpx;
        .part2021 {
          display: flex;
          white-space: nowrap;
        }
        .part2022 {
          margin-top: 87rpx;
        }
        .image1Anima {
          width: 66rpx;
          height: 72rpx;
          padding: 0 90rpx;
          display: inline-block;
        }
      }
    }

    .part21 {
      width: 563rpx;
      height: 77rpx;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .part3 {
    width: 616rpx;
    height: 123rpx;
    background: url('./img/btn_tool_bg.png') no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    position: relative;
    .part31 {
      width: 171rpx;
      height: 89rpx;
      position: absolute;
      bottom: 58rpx;
      left: 50%;
      transform: translateX(-50%);
    }
    .part32 {
      width: 161rpx;
      height: 126rpx;
      position: absolute;
      bottom: 71rpx;
      left: 50%;
      transform: translateX(-50%);
    }
    .part33 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 161rpx;
      height: 94rpx;
      bottom: 71rpx;
    }
    .part34 {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 161rpx;
      padding: 40rpx 0;
      bottom: 71rpx;
      font-size: 48rpx;
      text-align: center;
    }
    .part341 {
      padding: 24rpx 0;
    }
  }
}
</style>
